hello，JS：09 DOM元素

发表于 | 更新于: | 分类于 ， | 阅读次数:
字数统计: 4,520 | 阅读时长 ≈ 19

一、DOM

1、定义

DOM，即文档对象模型（Document Object Model ）

2、现象

通过在页面——打开：检查元素——看见：元素为可折叠。可选中页面对应元素，事实上即选择了对象（即也选择了对象对应的属性或方法），相当于把页面文档对象化。事实上，就是用js手段调用操作该文档（即一个对象）。

二、Document对象，属性（或方法）

在DOM中最常用的对象就是：document对象（页面——检查，即查看属性）、element对象

1、常用属性

1
2
3
4
5
6
document.doctype
document.title
document.characterSet
document.head
document.body
document.images

2、document.readyState

readyState属性 返回当前文档的状态，共有三种可能的值:

  • loading：加载HTML代码阶段，尚未完成解析
  • interactive：加载外部资源阶段
  • complete：全部加载完成

图：可在代码中加上几张图片元素，再设置网络条件为慢3G，则出现：

3、 document.compatMode

compatMode 属性 返回浏览器处理文档的模式，可能的值为

  • BackCompat：向后兼容模式，也就是没有添加DOCTYPE
  • CSS1Compat：严格模式，添加了DOCTYPE

4、document.location

用于获取一个url

可直接使用location，如：

1
2
document.location === location        //true
document.location === window.location  //true

总结： document.location === location === window.location
location属性返回一个只读对象，提供了当前文档的URL信息，如：

1
2
3
4
5
6
7
8
9
10
11
12
// 假定当前网址为http://user:passwd@www.example.com:4097/path/a.html?x=111#part1

document.location.href // "http://user:passwd@www.example.com:4097/path/a.html?x=111#part1"
document.location.protocol // "http:"
document.location.host // "www.example.com:4097"
document.location.hostname // "www.example.com"
document.location.port // "4097"
document.location.pathname // "/path/a.html"
document.location.search // "?x=111"
document.location.hash // "#part1"
document.location.user // "user"
document.location.password // "passed"

其他location属性调用方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 跳转到另一个网址
document.location.assign('http://www.google.com')

// 优先从服务器重新加载
document.location.reload(true)

// 优先从本地缓存重新加载（默认值）
document.location.reload(false)

// 跳转到另一个网址，但当前文档不保留在history对象中，
// 即无法用后退按钮，回到当前文档
document.location.assign('http://www.google.com')

// 将location对象转为字符串，等价于document.location.href
document.location.toString()

5、document.write()

用document.write()方法时，即向当前文档写入内容，只要当前文档还没有用close方法关闭，它所写入的内容就会追加在已有内容的后面。
1

  • 如果页面已经渲染完成再调用write方法，它会先调用open方法，擦除当前文档所有内容，然后再写入。
  • 如果在页面渲染过程中调用write方法，并不会调用open方法。
    -需要注意的是，虽然调用close方法之后，无法再用write方法写入内容，但这时当前页面的其他DOM节点还是会继续加载。
    -做测试时，无须使用document.write()方法

三、Element对象，属性（或方法）

document对应的具体元素应如何选取（或操作）？
element对象表示页面上的元素。使用JS选择页面上的元素（element），然后对其做操作。

那么，对页面元素的操作有哪些？

A、选择它：通过一些方法找到其具体元素（如用css的id，class名，选择器、邻居、赋值等）

B、处理它：对拥有类型为元素节点、文本节点、注释节点的子节点进行删除、增加、查找、修改等操作

1、几个常用属性

1
2
3
4
5
6
7
8
9
10
11
nodeName：元素标签名，还有个类似的tagName
nodeType：元素类型
className：类名
id：元素id
children：子元素列表（HTMLCollection）
childNodes：子元素列表（NodeList）
firstChild：第一个子元素
lastChild：最后一个子元素
nextSibling：下一个兄弟元素
previousSibling：上一个兄弟元素
parentNode、parentElement：父元素

2、查询元素（如何选中一个元素？）

（1）getElementById()
结合页面元素使用 +
document.getElementByid()

如图：利用此方法选中该id的页面位置

（2）getElementsByClassName() 注：有s
document.getElementByClassName()

页面元素中不止独一无二的id名，还有类选择器，当我们在页面控制台上通过getElementByClassName()时，可获取（或查询）到一个或多个类选择器，会出现如图现象：

这看上去有点像数组，呈现形式相似、也可以用下标去进行访问。但通过list.去查看，并没有有关排序push、pop等的调用数组的方法，而是一种类数组的形式。

通过：

1
2
list.constructor
--> ƒ HTMLCollection(){ [native code] }

我们可以获知，document.getElementsByClassName() 所调用的是html里类的集合，其类型为HTMLCollection()，是一种页面元素的集合。

（3）getElementsByName()
document.getElementsByName()
通过此方法可以获取页面元素中带有name属性的html元素。比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。如：

（4）假设,类选择器有嵌套的话，我们如何获取嵌套于内的元素？如图：

A、（较为繁琐的） ES3写法：getElementsByName().getElementsByName()

语法：
document.getElementsByName().getElementsByName()

例子：

1
2
document.getElementsByClassName('box')[0].getElementsByClassName('child')
--> HTMLCollection [div.child]

事实上，使用document.getElementsByName()做一个联集，即无论是document还是任何一个对象，都可以使用：对象.XXXX 去做一个联集对象去获取相对应的准确元素。

B、（较为简便的）
ES5写法：querySelector()

注：可用于选择id元素使用

语法：
document.querySelector()

例子：

1
2
document.querySelector('.box .child')
--> <div class="child">child</div>


不过，它选择元素的时候，只能获取一个元素，如页面元素中有多个div，只会默认选择html元素中排在第一个的div元素。

如果需要在选择元素时，多种页面元素希望可以同时选中，则可以使用
这样的写法：querySelectorAll()

注： 可用于选择class元素时使用

例子：

1
2
3
4
5
6
7
//比如：
document.querySelectorAll('div')
--> NodeList(3) [div.box, div.child, div.box]
document.querySelectorAll('.box')
--> NodeList(2) [div.box, div.box]
document.querySelectorAll('#target')
--> NodeList [p#target]

在控制台测试时，我们可以直接使用$()和$$()直接代document.querySelector()和document.querySelectorAll()

1
2
3
4
$('#target')
--> <p id="target">wangxiaoqin</p>
$$('#target')
--> [p#target]


可以自己写个方法，让$()和$$()可以在代码编辑器中直接使用，如下：

1
2
3
4
5
6
7
8
9
10
11
12
//写个方法：
function $(selector){
   return document.querySelector(selector)
}
--> undefined
//即下面就可以在编辑器大胆使用$() 和 $$()，举几个例子：
$('#target')
--> <p id="target">wangxiaoqin</p>
$('.box')
--> <div class="box">…</div>
$('.box .child')
--> <div class="child">child</div>

（5）getElementsByTagName()
document.getElementsByTagName()

此方法返回所有指定标签的元素（搜索范围包括本身），返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。如图：

3、创建元素

（1）createElement() 创建一个新的元素放到页面上

用此方法创建并传入html的元素标签，创建一个虚拟的dom。该dom的节点存在内存里，并没有放在页面上，用户看不见。
如：

1
2
3
4
5
6
7
8
9
10
11
document.createElement('div')
--> <div></div>
//可赋值一个变量，之后可通过该变量轻松获取
var div = document.createElement('div')
--> undefined
div
--> <div></div>
var div = document.createElement('img')
--> undefined
div
-->  <img>

（2）createTextNode()
光出现元素标签还不够，我们可通过createTextNode()去创建（或生成）一个文本，将文本的内容放入元素中，如：

1
2
3
4
var text = document.createTextNode('wangxiaoqin')
--> undefined
text
--> "wangxiaoqin"

（3）createDocumentFragment()
该方法用来生成一个存在于内存的dom片段，但不属于当前文档。即不会生成一个标签，虚拟生成，常用于生成复杂的dom结构，然后插入当前文档。

正因为它不属于当前文档，所以并不参与页面的渲染加载的过程，它的任何改动都不会引发网页的重新渲染。比直接修改当前文档的DOM有更好的性能表现。

4、修改元素

（1）appendChild()
在元素末尾添加元素。把一个dom对象放入在另外一个对象的内部作为它的孩子

如：

1
2
3
4
var newDiv = document.createElement("div")
var newContent = document.createTextNode("Hello")
newDiv.appendChild(newContent)//括号内为新添加的“孩子”
--> "hello"

看一个实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <ul class="navbar"></ul>
</body>
</html>

<script>
//选择该容器ul，获取指定元素
var navbarNode = document.querySelector('.navbar')

for(var i=0;i<5;i++){//以下循环5此
  //创建一个子元素li
  var child = document.createElement('li')
  //创建一个文本，参数为字符串
  var text = document.createTextNode('hello'+i)
  //修改元素
  child.appendChild(text)
  //然后再把li放在我们的navbarNode里
  navbarNode.append(child)
}
</script>

如图：

另一种方法： 使用appendChild()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <ul class="navbar"></ul>
</body>
</html>

<script>
//选择该容器ul，获取指定元素
var navbarNode = document.querySelector('.navbar')

//创建一个虚拟的片段，可看成是一个虚拟标签，到最后放在navbarNode，该虚拟标签消失
var fragment =document.createDocumentFragment()
for(var i=0;i<5;i++){//以下循环5此
  //创建一个子元素li
  var child = document.createElement('li')
  //创建一个文本，参数为字符串
  var text = document.createTextNode('helloo'+i)
  //修改元素
  child.appendChild(text)
  //然后再把li放在我们的frgment这个虚拟片段里
  fragment.appendChild(child)
}
//再将这个片段放在navbarNode里
navbarNode.appendChild(fragment)
</script>

如图：

在控制台我们可以看到：

再回看JS代码，则可以知道，

1
var fragment =document.createDocumentFragment()

这里创建的这个虚拟片段，我们可看成是一个虚拟标签，到最后放在navbarNode，该虚拟标签消失。并不影响实际页面元素的改动。

假设：我们在createDocumentFragment()里加上一个实际的块元素包裹li，那么则不符合页面的规则，如：

控制台则如：这显然不符合规则

（2）insertBefore()
在某个元素之前插入元素

1
2
3
var newDiv = document.createElement("div")
var newContent = document.createTextNode("Hello")
newDiv.insertBefore(newContent, newDiv.firstChild)

（3）replaceChild()
replaceChild()接受两个参数：要插入的元素和要替换的元素

1
newDiv.replaceChild(newElement, oldElement)

5、删除元素

removeChild() 用于删除元素

1
parentNode.removeChild(childNode)

6、clone元素
克隆一个完成的dom节点。
方法有一个布尔值参数，传入true的时候会深复制，也就是会复制元素及其子元素（IE还会复制其事件），false的时候只复制元素本身

1
node.cloneNode(true)

四、属性的操作（即修改dom元素的属性的操作方法）

1、getAttribute()

（现有页面中有一个图片地址，所对应的是一个src的地址，如果更换图片，则需要修改src对应的值。（或获取一个img的src，或a链接的href））用于获取元素的属性值，如：

1
node.getAttribute('id')

2、createAttribute() 【一般用不到，一般不创建】

用于创建（或获取）属性名，如

1
attribute = document.createAttribute(name)//参数name，是属性的名称

3、setAttribute()

用于设置属性和值

1
2
var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");  //括号中为“属性名+值”

4、removeAttribute()

用于删除对应属性

1
node.removeAttribute('id')

页面范例展示涉及到的点：

（1）查找、修改、获取、删除a链接的属性（这里为id）

1
2
3
4
5
6
7
8
9
10
11
12
13
var link = document.querySelector('a')
link
   <a href="#">wanxgiaoqin</a>

//可以创建 a链接的id属性值
link.setAttribute('id','login')

//以此类推，可以修改它的id
link.setAttribute('id','logout')
//可以获取（或添加）它的id
link.getAttribute('id')
//可以删除它的id
link.removeAttribute('id')

图：

（2）创建一个样式放在页面上，如何操作？

如：使用js让我们的页面上引入一个新的js，如jquery。可先在Bootstrap 中文网开源项目免费CDN加速服务上找一个jquery的地址

分析：用js引用一个jQuery，那么需要有一个scirpt的标签，用src来指向jQuery地址

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//创建一个script标签
var script = document.createElement('script')
--> undefined
script 
<script></script > 

//设置元素的属性和值
script .setAttribute('src','https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js')
--> undefined
//验证一下
script
--> <script  src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script > 

//通过.body.appendChild(script)将整个标签属性值放置到页面
document.body.appendChild(script)
--> <script  src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script > 
//使用jquery
$
--> ƒ (e,t){return new w.fn.init(e,t)}
jQuery
--> ƒ (e,t){return new w.fn.init(e,t)}

5、innerHTML VS innerText

（1）innerHTML
假设获取了一个dom元素，想知道页面中的html元素是什么，或者放入很多东西（不通过创建dom节点的方式appendChild进去）页面的一些菜单栏设置，通过后台要数据，后台交还一个数组或json数据（包括菜单的所有信息），如何将菜单渲染到页面上？通过字符串操作遍历对象（或数组）去拼装html字符串，拼接后一次性将html放置在空的节点下，则页面看到了东西

几个操作：Ajax获取数据——数据到来之后拼接html字符串（遍历、相加）——通过innerHtml方法将包含菜单信息的html字符串放在页面上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//数组的值渲染做成一个菜单
var navbarDate =[1,2,3]
//写一个空字符串，去拼接字符串的html
var html =' '
//遍历这个数组
navbarDate.forEach(function(item){
     html +='<li>'+item+'</li>'   //将数组三个数拼在一起
})
--> undefined
html
--> "<li>1</li><li>2</li><li>3</li>"  //无需换行，只需要拼接处html字符串即可

//可将生成的html字符串放在.navbar
document.querySelector('.navbar').innnerHTML = html
--> "<li>1</li><li>2</li><li>3</li>" 
document.querySelector('.navbar')
--> <div class="navbar">...</div>

图：

（2）innerText
看看所设置的元素标签下文本是什么（或设置它的文本）

注： 没有必要再创建什么元素标签，只需要设置一个空标签，然后设置它的innerText

续上面的例子：

1
2
3
4
5
document.querySelector('.navbar').innerText //作html去执行
-->"1
    2
    3
    "

假如代码是这样：

1
document.querySelector('.navbar').innerText = html   //呈现给用户

则将展示文本设置在页面上，如图：

五、常见的使用方式

1、修改样式

可修改元素的style属性，修改结果直接反映到页面元素（不过，由于CSS权重的关系，虽然控制台修改dom节点上的style属性与页面上的一一对应，但如果权重比不够，修改的结果也不一定生效）
如：

1
2
3
//dom元素的style属性上的 XXX与页面上一一对应
document.querySelector('p').style.color = 'red'  //选中对应元素，和修改对象+属性
document.querySelector('.box').style.backgroundColor = '#ccc'

2、获取样式 getComputedStyle

不是获取元素的style属性，而是元素计算后的样式（包括其他地方做的设置、浏览器默认样式、继承样式等综合后的结果）。即

1
2
3
var node = document.querySelector('p')
var color = window.getComputedStyle(node).color  //可直接使用，它是处在win的一个全局变量属性
console.log(color)

如在控制台想要获取页面dom元素的字体大小,如：

1
2
3
4
5
getComputedStyle(document.querySelector('#hello'))  //获取的是相对应的对象，通过对象获取对应的style对应的属性
getComputedStyle(document.querySelector('#hello'))['font-size']//即获取字体大小

//等同于
getComputedStyle(document.querySelector('#hello')).fontSize

3、class操作

当使用样式操作时，涉及到一些样式的切换，可以直接去修改它的style，但这样比较细，且复杂。假设当我们在页面点击一个按钮时，整体发生一个很大的变化（包括字体大小、出现的边框、背景色、背景图片，甚至动画效果），如果都是用style来操作，或导致代码冗长难修改，我们可以将这些样式放在一个css的class里面，如active。正常情况下是没有这些class，当我们点击某个元素的时候，即鼠标放上去时，给这个元素添加一个class

1
2
3
4
5
6
7
var nodeBox = document.querySelector('.box')
console.log( nodeBox.classList ) //通过选择元素nodeBox去看看classList里拥有哪些class，
     //即得到一个类数组对象.通过下标的方式获取class
nodeBox.classList.add('active')      //新增 class
nodeBox.classList.remove('active')   //删除 class
nodeBox.classList.toggle('active')   //新增/删除切换
node.classList.contains('active')    // 判断是否拥有 class

如图：


class操作，不用担心class的数量有多少，无需担心同名、正则，只需要采用这种原生JS的API就能操作页面dom元素

4、页面宽高的计算

（1）element.clientHeight VS element.clientWidth
获取元素窗口的高度、宽度

（2）element.offsetHeight VS element.offsetWidth
获取（包含边框+内边距+窗口整体）的高度、宽度

获取两种的宽高，得到的结果看具体情况，有些时候是相同，有些时候是不同，如图：

（3）element.scrollHeight
元素滚动内容的总长度，也分实际情况
假设页面上有一处包含内容的div块级，页面若为可滚动的，表示内容长度超出它容器的高度，而容器高度已为固定宽高，此时scrollHeight＞clientHeight
若页面若无滚动条、父容器高度没有固定，则scrollHeight=clientHeight=offsetHeight

（4）element.scrollTop
获取元素滚动的高度，即滚动时滚动了一定的值

1
document.body.scrollTop

（5）window.innerHeight
窗口的高度

1
window.innerHeigh

实例操作：http://js.jirengu.com/fuser/1/edit?html,css

以下问题跟之后的解决懒加载有密切联系

问题1：如何去判断一个元素是否出现在窗口的视野中

问题2：如何判断页面滚动到底部

元素到顶点的值=滚动的值

元素滚动的距离+窗口的高度=这个元素到顶点的距离

-------------本文结束感谢您的阅读-------------